<template>
    <el-container class="st-width-100-pc st-height-100-pc">
        <el-header style="height: auto;">
            <StElDynamicForm
                    :submit-props="{useDefault: false}"
                    ref="form"
                    :options="formItems"
                    :origin-prop="{inline: true,labelWidth: '100px'}"
                    v-on:change="(form)=>{selectedAppCode=form.appCode}"
            >

                <template #buttons>
                    <el-button v-bind="$stElStyleTools.aiButtonStyle('获取自定义菜单')"
                               @click="menuGet" size="mini" :loading="menuGetButtonLoading">获取自定义菜单
                    </el-button>
                    <el-button v-bind="$stElStyleTools.aiButtonStyle('删除自定义菜单')"
                               @click="menuDelete" size="mini" :loading="menuDeleteButtonLoading">删除自定义菜单
                    </el-button>
                </template>
            </StElDynamicForm>

        </el-header>
        <el-main class="st-width-100-pc st-height-100-pc st-padding-0">
            <MpMenuEdit

                    ref="mpMenuEdit"
                    :buttons="buttons"
                    :app-code="selectedAppCode"
                    :switch-to-origin-wx-mp-menu-json="selfmenu_infoSwitchToOriginWxMpMenuJson"
            ></MpMenuEdit>

        </el-main>
    </el-container>
</template>

<script>
    import MpMenuEdit from '../../components/mp/MpMenuEdit.vue'
    import MpMixin from '../MpMixin.js'
    import MpUrl from '../MpUrl.js'
    export default {
        mixins: [MpMixin],
        components:{
            MpMenuEdit,
        },
        name: "MpSelfMenu",
        computed:{

        },
        data(){
            return {

                buttons: null,
                selectedAppCode: null,
                menuGetButtonLoading: false,
                menuDeleteButtonLoading: false,

                formItems:[
                    {
                        field: {
                            name: 'appCode'
                        },
                        element:{
                            type: 'select',
                            required: true,
                            options:{
                                datas: MpUrl.configList,
                                optionProp:{
                                    value: 'appCode',
                                    label: 'appName'
                                }
                            },
                            label: '公众号',
                        }
                    },
                    {
                        field: {
                            name: 'is_menu_open',
                            value: '未获取'
                        },
                        element:{
                            type: 'txt',
                            label: '当前菜单状态:',
                        }
                    },
                ]
            }
        },
        mounted(){
        },
        methods:{
            getAppCode(){
                return this.selectedAppCode
            },
            // 获取自定义菜单(高级)
            menuGet(){
                this.$refs.form.getFormRef().validate((valid) => {
                    if (valid) {
                        this.menuGetButtonLoading = true
                        this.axios.get(this.$stStringTools.replaceb(MpUrl.MpSelfMenuGet,{appCode: this.getAppCode()}))
                            .then(res => {
                                if (res.data.selfmenu_info) {
                                    let bTemp = res.data.selfmenu_info.button;
                                    bTemp.forEach(item=>{
                                        item.iconOk = true
                                        let subButtonList = item.sub_button.list
                                        if(subButtonList){
                                            subButtonList.forEach(subItem=>{
                                                subItem.iconOk = true
                                            })
                                        }
                                    })
                                    this.buttons = bTemp
                                }else {
                                    this.buttons = []
                                }

                                this.$refs.form.setFormPropValue({'is_menu_open': res.data.is_menu_open == 1 ? '开启': '未开启/已删除'})
                            }).catch(error => {
                            if(error.response){
                                if(error.response.status == 401){
                                    return
                                }
                                if (error.response.data && error.response.data.errorMsg) {
                                    this.$message.error(error.response.data.errorMsg)
                                }
                            }else {
                                this.$message.error('网络错误或服务不可用')
                            }
                        }).finally(()=>{
                            this.menuGetButtonLoading = false
                        })
                    }
                })

            },
            menuDelete(){
                let appCode = this.getAppCode()
                if(!appCode){
                    this.$message.error('请选择需要删除的公众号')
                    return
                }
                this.$confirm('会删除默认菜单及全部个性化菜单, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.menuDeleteButtonLoading = true
                    this.axios.delete(this.$stStringTools.replaceb(MpUrl.MpSelfMenuDelete,{appCode: appCode}))
                        .then(res=>{
                            this.$message.success('删除成功')
                        }).catch(error=>{
                        if(error.response){
                            if(error.response.status == 401){
                                return
                            }
                            if (error.response.data && error.response.data.errorMsg) {
                                this.$message.error(error.response.data.errorMsg)
                            }
                        }else {
                            this.$message.error('网络错误或服务不可用')
                        }
                    })
                        .finally(()=>{
                            this.menuDeleteButtonLoading = false
                    })
                })
            },
            // 将自定义菜单的数据结构转为微信公众号原始的可提交的json数据
            selfmenu_infoSwitchToOriginWxMpMenuJson(buttons){
                let originMenu = {
                    button: []
                }
                let generateButtonItem = (buttonsItem)=>{
                    let buttonItem = {}
                    for (let key in buttonsItem){
                        if(buttonsItem[key] !== null){
                            if(key == 'sub_button'){
                                if(buttonsItem[key].list != null){
                                    buttonItem['sub_button'] = []
                                    for (let i = 0; i < buttonsItem[key].list.length; i++) {
                                        buttonItem['sub_button'].push(generateButtonItem(buttonsItem[key].list[i]))
                                    }
                                }
                            }
                            else{
                                buttonItem[key] = buttonsItem[key]
                            }
                        }
                    }
                    return buttonItem
                }
                for (let i = 0; i < buttons.length; i++) {
                    let buttonsItem = buttons[i]
                    originMenu.button.push(generateButtonItem(buttonsItem))
                }
                return originMenu
            }

        }
    }
</script>

<style scoped>

</style>